<!--
 * @Descripttion: 
 * @Author: 颜博骏 bojun@ssc-hn.com
 * @Date: 2024-05-09
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-05-13
 * @Description: 
-->
<template>
  <a-modal v-model:visible="visible" title="修改密码" :footer="null" @cancel="onCancel">
    <a-form ref="formRef" name="custom-validation" :model="formState" :label-col="labelCol" :rules="rules" @finish="handleFinish">
      <a-form-item has-feedback label="旧密码" name="oldPwd">
        <a-input-password v-model:value="formState.oldPwd" />
      </a-form-item>
      <a-form-item has-feedback label="新密码" name="newPwd">
        <a-input-password v-model:value="formState.newPwd" type="password" autocomplete="off" />
      </a-form-item>
      <a-form-item has-feedback label="确认密码" name="confirmPwd">
        <a-input-password v-model:value="formState.confirmPwd" type="password" autocomplete="off" />
      </a-form-item>
      <a-form-item label=" " :colon="false">
        <a-button type="primary" html-type="submit">保存并更改</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import type { FormInstance } from 'ant-design-vue'
  import { message } from 'ant-design-vue'
  import type { Rule } from 'ant-design-vue/es/form'
  import md5 from 'js-md5'
  import { computed, reactive, ref } from 'vue'

  import { requestUpdatePass } from '/@/api/system/ysys-user/user/index'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { clearToken } from '/@/storage'
  import { PageEnum } from '/@/enums/pageEnum'
  import router from '/@/router'
  import { removeToken } from '/@/storage'

  interface FormState {
    oldPwd: string
    newPwd: string
    confirmPwd: string
  }
  const formRef = ref<FormInstance>()
  const labelCol = { style: { width: '90px' } }
  const formState = reactive<FormState>({
    oldPwd: '',
    newPwd: '',
    confirmPwd: '',
  })
  const props = defineProps({
    visible: { type: Boolean, default: false },
    id: { type: String, default: '' },
  })

  const validatePass = async (_rule: Rule, value: string) => {
    if (value === '') {
      return Promise.reject('请输入新密码')
    } else if (value === formState.oldPwd) {
      return Promise.reject('新密码设置不能与旧密码相同')
    } else {
      if (formState.confirmPwd !== '') {
        formRef.value?.validateFields('confirmPwd')
      }
      return Promise.resolve()
    }
  }
  const validatePass2 = async (_rule: Rule, value: string) => {
    if (value === '') {
      return Promise.reject('请输入新密码确认')
    } else if (value !== formState.newPwd) {
      return Promise.reject('两次密码输入不相同')
    } else {
      return Promise.resolve()
    }
  }

  const rules: Record<string, Rule[]> = {
    oldPwd: [{ required: true, message: '请输入您的密码', trigger: 'change' }],
    newPwd: [
      { required: true, validator: validatePass, trigger: 'change' },
      {
        pattern: /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,20}$/,
        message: '密码必须包含至少字母、数字、特殊字符中的两种，长度至少6位，至多20位',
        trigger: 'blur',
      },
    ],
    confirmPwd: [{ required: true, validator: validatePass2, trigger: 'change' }],
  }

  const handleFinish = async (values: FormState) => {
    const params = {
      newPwd: md5(values.newPwd),
      oldPwd: md5(values.oldPwd),
      confirmPwd: md5(values.confirmPwd),
    }
    const { responseCode } = await requestUpdatePass(params)
    if (responseCode === HttpCodeEnum.SUCCESS) {
      clearToken()
      message.success('修改成功,请重新登录', 1, () => {
        router.push(PageEnum.LOGIN)
      })
    }
  }
  const emits = defineEmits(['update:visible'])
  const visible = computed({
    get: () => props.visible,
    set: (val) => emits('update:visible', val),
  })

  const onCancel = () => {
    console.log('#############')

    formRef.value?.resetFields()
  }
</script>

<style lang="less"></style>
